<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <style>
    ul {
      list-style: none;
    }
  </style>
  <body>
    <ul>
      <li>全选<input type="checkbox" id="all" /></li>
      <li>Java<input type="checkbox" class="item" /></li>
      <li>javaScript<input type="checkbox" class="item" /></li>
      <li>C++<input type="checkbox" class="item" /></li>
      <li>python<input type="checkbox" class="item" /></li>
      <li>.net<input type="checkbox" class="item" /></li>
    </ul>

    <script>
      // 补全代码
      /**
       * 描述
      请补全JavaScript代码，实现以下效果：
      1. 选中"全选"框，以下所有选项全部勾选。
      2. 把"全选"框从选中状态勾选成未选中状态，其他复选框全部取消选中效果。
      3. 当其他复选框全部选中，"全选框"为选中状态。
      4. 当其他复选框有一个未选中，"全选框"取消选中状态。
      注意：
      1. 必须使用DOM0级标准事件（onchange）
      */
      var all = document.querySelector('#all')
      // 将类数组使用from转化为真正的数组才能使用every
      var options = Array.from(document.querySelectorAll('.item'))
      // 全选功能
      all.onchange = function() {
        var isCheck = this.checked
        options.forEach((item) => {
          item.checked = isCheck
        })
      }
      // 是否全部被选中
      function hasCheckall() {
        for(var i = 0; i < options.length; i++) {
          if (!options[i].checked) return false
        }
        return true
      }
      // 其他选中
      var isCheckAll = false
      options.forEach((item) => {
        item.onchange = function() {
          isCheckAll = hasCheckall()
          all.checked = isCheckAll
        }
      })
    </script>
  </body>
</html>
